﻿@model Guid
@section Styles{

}
@section Scripts{
    <input type="hidden" value='@Html.Raw(ViewData["power"])' id="hidden_power" />
    <input type="hidden" value='@ViewData["isFindback"]' id="hidden_isFindback" />
    <input type="hidden" value='@Model' id="hidden_id" />

    <script src="~/admin/libs/html2canvas.js"></script>
    <script type="text/javascript">
        var power = JSON.parse(document.getElementById('hidden_power').value);
        var isFindback = document.getElementById('hidden_isFindback').value;
        var id = document.getElementById('hidden_id').value;

        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    power: power,
                    prefix: "/Admin/SalesSlipInfo_Items",
                    search: {
                        state: false,
                        vm: {
                            Id: id,
                            TestDemo: null
                        }
                    },
                    table: {
                        columns: [],
                        data: [],
                        dataItmes: [],
                        page: 1,
                        rows: 999999,
                        totalCount: 0,
                        selecteds: []//选中的行
                    }
                }
            },
            //dom 创建
            created: function () {
                this.findList();
            },
            //dom渲染完成
            mounted: function () {

            },
            methods: {
                //获取列表
                findList: function () {
                    var _this = this;

                    var path = _this.prefix + "/ItmesFindList/" + _this.search.vm.Id;

                    hzyAdmin.post(path, _this.search.vm, function (r) {
                        if (r.status != 1) return;

                        _this.table.data = r.data.salesslipModel;
                        _this.table.dataItmes = r.data.salesslipItmesList;

                        //_this.table.totalCount = r.data.TotalCount;
                        //_this.table.columns = r.data.Cols;salesslipModel
                    });
                },
                getSummaries(param) {

                    const { columns, data } = param;

                    const sums = [];
                    columns.forEach((column, index) => {
                        if (index === 0) {
                            sums[index] = '总价';
                            return;
                        }
                        //if (column.property==='SalesSlipInfo_Items_ProdectNumber') {

                        //}
                        const values = data.map(
                            item => Number(item[column.property])

                        );
                        if (column.property == 'SalesSlipInfo_Items_ProdectNumber' || column.property == 'SalesSlipInfo_Items_ProdecMoney') {
                            sums[index] = values.reduce((prev, curr) => {

                                const value = Number(curr);
                                if (!isNaN(value)) {
                                    return prev + curr;
                                } else {
                                    return prev;
                                }
                            }, 0);
                           sums[index] = sums[index].toFixed(0);
                           // alert(sums[index])
                        } else {
                            sums[index] = 'N/A';
                        }
                    });

                    return sums;
                },
                objectSpanMethod({ row, column, rowIndex, columnIndex }) {

                    //if (columnIndex === 1) {
                    //    if (rowIndex % 2 === 0) {
                    //        return {
                    //            rowspan: 2,
                    //            colspan: 1
                    //        };
                    //    } else {
                    //        return {
                    //            rowspan: 0,
                    //            colspan: 0
                    //        };
                    //    }
                    //}
                },
                xiazai: function () {
                     var _this = this;
                     
                    var element = $(".row");
                    var getCanvas;
                    html2canvas(element, {
                        onrendered: function (canvas) {
                            //这是显示预览图的id
                           //  $("#previewImage").append(canvas);
                             getCanvas = canvas;
                             var imgageData = getCanvas.toDataURL("image/png");
                // Now browser starts downloading it instead of just showing it
                var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
                            //$("#btn-Convert-Html2Image").attr("download", _this.table.data[0].SalesSlip_Code + ".png").attr("href", newData);
                            var a=document.createElement('a')
                            document.body.appendChild(a)
                            a.href=imgageData
                            a.download = _this.table.data[0].SalesSlip_Code;
                            a.click()

                        }
                    });
                    
                }
            }
        });
    </script>
    
}
<div class="m-20" id="app">
    <div class="container-fluid">
        <div class="card m-0">
            <div class="card-body pl-0 pr-0">
                <div class="border-radius: 2px py-15 px-15">
                    <el-button type="primary" @@click="xiazai">保存为图片</el-button>
                    <br />
                    <div class="row">
                        <div class="col-sm-12  ">
                            <div class="text-center font-size-24" style="color:black">
                                <span>   北京亿诚销售订单</span>
                            </div>
                            <span style="color:black" class="float-left pl-10 font-size-20  pb-10">订单编号：{{table.data[0].SalesSlip_Code}}</span>
                            <span style="color:black" class="float-left pl-10 font-size-20 pb-10">
                                客户名称：{{table.data[0].Customer_Name}}
                            </span>
                            <span style="color:black" class="float-left pl-10 pb-10 font-size-20">客户电话：{{table.data[0].Customer_Phone}}</span>
                            <span style="color:black" class="float-left pl-10 pb-10 font-size-20">客户地址：{{table.data[0].Costomer_Address}}</span>

                            <span style="color:black" class="float-right pr-20 pb-10 font-size-20">日期：{{table.data[0].SalesSlip_CreateTime}}</span>
                            @*<span style="color:black" class="float-right pr-10 font-size-16">经手人：{{table.data[0].SalesSlip_Handler}}</span>*@
                            <el-table class="table font-size-16" :data="table.dataItmes"
                                      row-key="_ukid" border
                                      :header-cell-style="{background:'#d9e9ff',color:'#000000'   }"
                                      :cell-style="{color:'#000000'  }"
                                      :summary-method="getSummaries"
                                      :span-method="objectSpanMethod"
                                      show-summary>
                                <el-table-column type="index" width="50" fixed></el-table-column>

                                <el-table-column prop="Product_Code" label="产品编码"></el-table-column>
                                <el-table-column prop="Product_Name" label="产品名称"></el-table-column>
                                <el-table-column prop="Product_Colour" label="产品颜色"></el-table-column>
                                <el-table-column prop="Product_Specs" label="产品规格"></el-table-column>
                                <el-table-column prop="SalesSlipInfo_Items_Enclosure" label="罩壳配置"></el-table-column>
                                <el-table-column prop="SalesSlipInfo_Items_ProdectUnit" label="单位"></el-table-column>
                                <el-table-column prop="SalesSlipInfo_Items_ProdecUnitPrice" label="单位"></el-table-column>
                                <el-table-column prop="SalesSlipInfo_Items_ProdectNumber" label="数量"></el-table-column>
                                <el-table-column prop="SalesSlipInfo_Items_Width" label="宽"></el-table-column>
                                <el-table-column prop="SalesSlipInfo_Items_Height" label="高"></el-table-column>
                                <el-table-column prop="SalesSlipInfo_Items_ProdecMoney" label="金额"></el-table-column>
                            </el-table>
                            <span style="color:black" class="float-left pl-10 font-size-20">订单备注：{{table.data[0].SalesSlip_Remarks ? table.data[0].SalesSlip_Remarks :'无'}}</span>
                            <span style="color:black" class="float-left pl-10 font-size-20">收款账户：6230521000016426774(农业银行)</span>
                            <span style="color:black" class="float-left pl-10 font-size-20">PS：收到货后请认真检查，如有问题及时回复，逾期概不负责。电话：17611126002(同微信),15383209950</span>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>
